/* global document */
import React from 'react'
import PropTypes from 'prop-types'
import {config} from 'utils'
import {getToken} from 'utils/authority'
import {Button, Col, DatePicker, Form, Input, message, Row, Select} from 'antd'

const {Option} = Select
const {Search} = Input
const FormItem = Form.Item

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const formItemLayout = {
  labelCol: {span:8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}

const Filter = ({
                  onAdd,
                  onFilterChange,
                  filter,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                }) => {
  const handleFields = (fields) => {
    // const {createTime} = fields
    // if (createTime.length) {
    //   fields.createTime = [createTime[0].format('YYYY-MM-DD'), createTime[1].format('YYYY-MM-DD')]
    // }
    return fields
  }

  const valid = fields => {
    const {type, keyword} = fields

    if (!type && keyword) {
      message.warn("请选择查询类型")
      return false
    }

    return true
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    if (!valid(fields)) {
      return
    }
    onFilterChange(fields)
  }


  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }
  const {type, keyword} = filter




  return (
    <div>
    <Row gutter={24}>
      <Col md={5} sm={24}>
        <FormItem {...formItemLayout} label="订单编号">
          {getFieldDecorator('orderSn', {
          })(<Input  placeholder="请输入"/>)}
        </FormItem>
      </Col>
      <Col md={5} sm={24}>
        <FormItem {...formItemLayout} label="编辑人员">
          {getFieldDecorator('processEmpId', {
          })(<Input  placeholder="请输入工号或姓名"/>)}
        </FormItem>
      </Col>
      <Col {...ColProps} xl={{span: 9}} md={4} sm={24}>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 18}} style={{marginBottom: 14}} label="编辑日期">
          <Col span={11}>
            <FormItem>
              {getFieldDecorator('beginDate')(<DatePicker style={{width: '100%'}} placeholder="开始时间"/>)}
            </FormItem>
          </Col>
          <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign:'center' }}>
                -
              </span>
          </Col>
          <Col span={11}>
            <FormItem>
              {getFieldDecorator('endDate')(<DatePicker style={{width: '100%'}} placeholder="结束时间"/>)}
            </FormItem>
          </Col>
        </FormItem>
      </Col>

      <Col {...TwoColProps} xl={{span: 4}} md={{span: 24}} sm={{span: 24}}>
        <div style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap'}}>
          <div>
            <Button type="primary" className="margin-right" onClick={handleSubmit}>查询</Button>
            <Button onClick={handleReset}>重置</Button>
          </div>
        </div>
      </Col>


    </Row>


    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(Filter)
